<head>
    <meta charset="UTF-8">
    <title>欢迎登陆</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        a {
            text-decoration: none;
        }
        fieldset {
            display: inline-block;
            width: 340px;
            margin-top: 70px;
            color: #999;
            border: none;
            border-top: 1px solid #999;
            text-align: center;
            font-size: 13px;
            margin-left: 33px;
        }

        .zong {
            width: 100%;
            height: 100%;
        }

        .top {
            width: 100%;
            height: 100px;
            background-image: url(images/xiaomisc_20200923104219.png);
            background-repeat: no-repeat;
            background-position: 40px;
        }

        .banner {
            width: 100%;
            height: 588px;
            background: url(images/20200923093301.png) no-repeat left;
        }

        .banner_box {
            height: 500px;
            width: 400px;
            background: white;
            position: absolute;
            right: 70px;
            margin-top: 44px;
        }

        .banner_box input {
            height: 50px;
            width: 360px;
            margin-top: 30px;
            margin-left: 20px;
            font-size: 15px;
        }

        .dl {
            display: inline-block;
            font-size: 22px;
            color: #f56600;
            margin: auto 15px auto 80px;
            font-family: "微软雅黑";
        }

        .sm {
            display: inline-block;
            margin-top: 30px;
            font-size: 22px;
            margin-left: 15px;
            color: black;
            font-family: "微软雅黑";

        }

        .y_zc {
            font-size: 20px;
            float: right;
        }

        .img_t {
            margin-left: 30px;
            cursor: pointer;
        }

        .img_tc {
            cursor: pointer;
            margin-left: 90px;
        }

        .img {
            height: 30px;
            width: 400px;
            margin: 30px auto;
            position: absolute;
            bottom: 13px;
        }

        .zhdl {
            visibility: visible;
        }

        .smdl {
            visibility: hidden;
            position: absolute;
            top: 290px;
            right: 117px;
        }

        .smdl p {
            font-size: 15px;
            text-align: center;
        }

        .footer {
            width: 100%;
            height: 170px;
            background-color: white;
        }

        .footer p {
            padding-top: 60px;
            text-align: center;
            color: darkgray;
            color: #372229;
        }

        .footer li {
            float: left;
            list-style: none;
            margin-left: 30px;
            font-size: 14px;
        }

        .footer .li {
            margin-left: 550px;
            font-size: 15px;
        }

        .footer ul {
            padding-top: 80px;
        }

        .footer a {
            color: #261a1f;
        }
    </style>
</head>

<body>
<!--页面大容器-->
<div class="zong">
    <!--页面头部部分-->
    <div class="top">
        <!-- <img class="top_logo" src="img/mistore_logo.png" /> -->
    </div>
    <!--页面中部部分-->
    <div class="banner">
        <div class="banner_box">
            <a href="#" class="dl" id="zh" onclick="dl()">账号登录</a>
            <span style="color: #e0e0e0">|</span>
            <a href="#" class="sm" id="sm" onclick="sm()">扫码登录</a>
            <div class="zhdl" id="zhdl">
                <form action="/register.do" method="post">
                    <input type="hidden" name="method" value="reg">
                    <input type="text" id="phone" name="phone" placeholder="电话号码" />
                    <input type="password" name="password" placeholder="密码">
                        <div class="y_zc_ac">
                            <input type="code"  id="code" name="code" placeholder="验证码" required>
                                <input  id="sendCode"  type="button" value="发送验证码">
                        </div>
                    <input style="background-color: #F56600; border: none; color: white;" type="submit" value="立即登录/注册">
                </form>
                <span class="y_zc"></span>
		        <a href="/loginuser.html" style="color: #f56600;">用户密码登录</a>
                <form>
                    <!--当一组表单元素放到 <fieldset>标签内时，
                    浏览器会以特殊方式来显示它们，
                    它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
                    -->
                    <fieldset>
                        <a href="#">收不到验证码？</a>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div class="smdl" id="smdl">
        <img style="margin-left: 63px;" src="images/20200923101825.png" />
        <p>使用<span style="color:#f56600 ;">小米商城APP</span>扫一扫</p>
        <p>小米手机可打开&lceil;设置&rfloor;&nbsp;&gt;&nbsp;&lceil;小米账号&rfloor;&nbsp;扫码登陆</p>
    </div>
</div>
<!--页面底部部分-->
<div class="footer">
    <ul>
        <li class="li">
            <a href="#">简体</a>
        </li>
        <li>|</li>
        <li>
            <a href="#">繁体</a>
        </li>
        <li>|</li>
        <li>
            <a href="#">English</a>
        </li>
        <li>|</li>
        <li>
            <a href="#">常见问题</a>
        </li>
        <li>|</li>
        <li>
            <a href="#">隐私政策</a>
        </li>
    </ul>
    <p>小米公司版权所有-川 ICP备100464888  <img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png">  公网安备1062654466666号-川 ICP证444646662号</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var smc = document.getElementById("sm");
        var dld = document.getElementById("zh");
        var dljm = document.getElementById("zhdl");
        var smdl = document.getElementById("smdl");

        function sm() {
            smc.style.color = "#f56600";
            dld.style.color = "black";
            dljm.style.visibility = "hidden";
            smdl.style.visibility = "visible";

        }

        function dl() {
            smc.style.color = "black";
            dld.style.color = "#f56600";
            dljm.style.visibility = "visible";
            smdl.style.visibility = "hidden";
        }
      $("#sendCode").on("click",function () {
          var phone = $("#phone").val();
          alert(phone);
      $.ajax({
          url:"register.do?method=getCode",
          type:"post",
          dateType:"json",
          data:{"phone":phone},
          success:function (result) {
              console.log("发送成功")
          },error:function () {
            alert("系统错误")
          }
      })
      })
    })
</script>
</body>
